<template>
  <div class="singer-detail">
    <music-list :songs="songs" :title="title" :pic="pic"></music-list>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { getSingerDetail } from '@/service/singer'
  import { processSongs } from '@/service/song'
  import MusicList from '@/components/music-list/music-list'

  export default defineComponent({
    name: 'singer-detail',
    props: {
      singer: Object
    },
    data() {
      return {
        songs: []
      }
    },
    async created() {
      const response = await getSingerDetail(this.singer)
      const result = await processSongs(response.songs)
      this.songs = result
    },
    computed: {
      title() {
        return this.singer && this.singer.name
      },
      pic() {
        return this.singer && this.singer.pic
      }
    },
    components: { MusicList }
  })
</script>

<style lang="scss" scoped>
  .singer-detail {
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: $color-background;
  }
</style>
